<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>

    <title>学生新增/修改弹窗页面</title>

    <div th:replace="common/common.html :: common_resource"></div>

</head>

<body class="gray-bg">

<div th:fragment="addStudent">
<div id="modal-form" class="modal fade" aria-hidden="true">
    <div class="modal-dialog" style="width:64%;">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-2 b-r"></div>
                    <div class="col-sm-5 b-l">
                        <h3 class="m-t-none m-b" style="margin-bottom:30px"><i class="fa fa-paste"></i> 新增(修改) 学生信息</h3>

                        <form th:action="@{/student/addEditStudent}" method="post">
                            <div class="form-group">
                                <label>学号：</label>
                                <input type="text" id="stuNo" name="stuNo" placeholder="请输入学号" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>学生姓名：</label>
                                <input type="text" id="stuName" name="stuName" placeholder="请输入学生姓名" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>请选择性别：</label>
                                <div>
                                    <label class="radio-inline">
                                        <input style="margin-top:2px;" type="radio" value="1" id="sex1" name="sex">男</label>
                                    <label class="radio-inline">
                                        <input style="margin-top:2px;" type="radio" value="0" id="sex2" name="sex">女</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>年级：</label>
                                <input type="text" id="grade" name="grade" placeholder="请输入年级" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>年龄：</label>
                                <input type="text" id="age" name="age" placeholder="请输入年龄" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>身份证号：</label>
                                <input type="text" id="number" name="number" placeholder="请输入身份证号" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>手机号码：</label>
                                <input type="text" id="phone" name="phone" placeholder="请输入手机号码" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>邮箱：</label>
                                <input type="text" id="email" name="email" placeholder="请输入邮箱" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">所属二级学院：</label>
                                <div>
                                    <select class="form-control" id="collegeId" name="collegeId">
                                        <option id="selectCollege" value="">请选择二级学院</option>
                                        <span th:each="college : ${collegeList}">
                                            <option th:id="${college.getCollegeId()}" th:value="${college.getCollegeId()}" th:text="${college.getCollegeName()}" hassubinfo="true">文本</option>
                                        </span>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">所属班级：</label>
                                <div>
                                    <select class="form-control" id="classId" name="classId">
                                        <option id="selectClass" value="">请选择班级</option>
                                        <span th:each="class : ${classList}">
                                            <option th:id="${class.getClassId()}" th:value="${class.getClassId()}" th:text="${class.getClassName()}" hassubinfo="true">文本</option>
                                        </span>
                                    </select>
                                </div>
                            </div>
                            <script th:inline="javascript">
                                $("#collegeId").blur(function(){   // 根据选择的省查询下面的市
                                    var collegeId = $('#collegeId option:selected').val();  // 获取选择的值
                                    var classList = [[${classList}]];
                                    $("#classId").empty(); // 清空
                                    for(var i=0; i<classList.length; i++){
                                        if(classList[i].collegeId == collegeId){
                                            //先创建好select里面的option元素
                                            var option = document.createElement("option");
                                            //转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
                                            $(option).val(classList[i].classId);
                                            //给option的text赋值,这就是你点开下拉框能够看到的东西
                                            $(option).text(classList[i].className);
                                            //获取select 下拉框对象,并将option添加进select
                                            $('#classId').append(option);
                                        }
                                    }
                                })
                            </script>
                            <div th:if="${session.teamStuNo == null}" style="margin-top:20px;">
                                <button style="width:100px;margin-top:15px;margin-bottom:30px;"
                                        class="btn btn-sm btn-primary pull-left m-t-n-xs" type="submit">
                                    <strong>提交</strong>
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-5 b-l"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

</body>

</html>
